import React, { useState } from 'react'
import Echarts from '&/baseUI/EChartsUI'
import { useEffect, useContext, useCallback } from 'react'
import { Context } from '../../context'
import { cloneDeep } from 'lodash';

const options = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    show: true
  },
  grid: {
    top: '12%',
    right: '3%',
    left: '3%',
    bottom: '14%'
  },
  dataZoom: [
    { start:0,
      end:50,
      type: 'inside',
      moveOnMouseWheel: true, // 内部滚动条使用鼠标滚轮滚动
      zoomOnMouseWheel: false // 鼠标滚轮放大缩小
    },
    {
      type: 'slider',
      height: 10,
      bottom: 7
    }
  ],
  xAxis: {
    type: 'category',
  },
  yAxis: {
    name: 'kW·h',
    nameTextStyle: {
      align: 'right'
    },
    type: 'value'
  },
  series: []
};

const EleAll = ({ industryOn, areaOn, preList, setPreList }) => {
  const { eleData, entData, paramsData, entValue } = useContext(Context)

  const [option, setOption] = useState({});
  const getSeries = (list = []) => {
    return list.map(item => {
      return {
        type: 'line',
        smooth: true,
        data: item.data,
        name: item.name
      }
    })
  }

  const devTypeMap = new Map([
    [1,"企业总电"],
    [2,"产污设施"],
    [3,"治污设施"],
    [5,"产治一体"],
    [4,"间接用电"]
  ]);

  const getOptions = (eleData, entData, industryOn, areaOn) => {
    const cloneOption = cloneDeep(options)
    const { county_value, industry_value } = eleData
    const devName = devTypeMap.get(paramsData.dev_type);

    const list = []
    if (devName) {
      if (entValue.length === 1) {
        list.push({
          name: `${devName}: ${entValue[0].entName}`,
          data: entData.data_info[devName]
        })
        setPreList(entData.data_info[devName])
      } else if(entValue.length === 2) {
        list.push({
          name: `${devName}: ${entValue[0].entName}`,
          data: preList
        })

        list.push({
          name: `${devName}: ${entValue[1].entName}`,
          data: entData.data_info[devName]
        })
      }

    }

    if (industryOn) {
      list.push({
        name: '行业均值',
        data: industry_value
      })
    }
    if (areaOn) {
      list.push({
        name: '区均值',
        data: county_value
      })
    }
    cloneOption.xAxis.data=eleData.time_list;
    cloneOption.series = getSeries(list)
    return cloneOption
  }

  useEffect(() => {
    if (entData && eleData) {
      setOption({})
      setOption(getOptions(eleData, entData, industryOn, areaOn))
    }
  }, [entData, eleData, paramsData.dev_type, industryOn, areaOn])






  return (
    <div style={{height:'100%'}}>
      <Echarts option={option} width={'100%'} />
    </div>
  )
}

export default EleAll
